<script setup lang="ts">
import { ref } from "vue"

const list = ref<any>([{
    orderSn: "32742501",
    type: "提现",
    source: "柏音艺术周年庆50元入场券——抢占价值1980元",
    productName: "幼儿编程课",
    amount: "-2000元",
    balance: "78633.26元",
    transactionTime: "2023-04-05 10:30:33"
}, {
    orderSn: "32742501",
    type: "提现",
    source: "柏音艺术周年庆50元入场券——抢占价值1980元",
    productName: "幼儿编程课",
    amount: "-2000元",
    balance: "76633.26元",
    transactionTime: "2023-04-05 10:35:33"
}, {
    orderSn: "32742501",
    type: "分销佣金",
    source: "柏音艺术周年庆50元入场券——抢占价值1980元",
    productName: "幼儿编程课",
    amount: "+10元",
    balance: "76643.26元",
    transactionTime: "2023-04-06 09:15:33"
}, {
    orderSn: "32742501",
    type: "收入",
    source: "柏音艺术周年庆50元入场券——抢占价值1980元",
    productName: "幼儿编程课",
    amount: "+10元",
    balance: "76653.26元",
    transactionTime: "2023-04-07 14:20:33"
}, {
    orderSn: "32742501",
    source: "柏音艺术周年庆50元入场券——抢占价值1980元",
    type: "退款",
    productName: "幼儿编程课",
    amount: "-1000元",
    balance: "75653.26元",
    transactionTime: "2023-04-08 16:45:33"
}, {
    orderSn: "98765432",
    type: "收入",
    source: "春季促销活动",
    productName: "高级美术课程",
    amount: "+500元",
    balance: "76153.26元",
    transactionTime: "2023-04-09 11:00:33"
}, {
    orderSn: "11223344",
    type: "提现",
    source: "线下推广活动",
    productName: "音乐启蒙班",
    amount: "-300元",
    balance: "75853.26元",
    transactionTime: "2023-04-10 09:45:33"
}]);
</script>

<template>
    <umrp-container direction="vertical" :gap="16">
        <umrp-search-card>
            <umrp-row :gutter="16" style="margin-bottom: 16px;">
                <umrp-col :span="8">
                    <umrp-form-item label="订单编号">
                        <umrp-input placeholder="请输入订单编号"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="商品名称">
                        <umrp-input placeholder="请输入商品名称"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="交易方">
                        <umrp-input placeholder="请输入微信昵称/用户编号/手机号码"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
            </umrp-row>
            <umrp-row :gutter="16">
                <umrp-col :span="8">
                    <umrp-form-item label="资金类型">
                        <umrp-select placeholder="请输入资金类型">
                            <umrp-option>提现</umrp-option>
                            <umrp-option>分销佣金</umrp-option>
                            <umrp-option>收入</umrp-option>
                            <umrp-option>退款</umrp-option>
                        </umrp-select>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="来源渠道">
                        <umrp-input placeholder="请输入来源渠道"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="8">
                    <umrp-form-item label="交易时间">
                        <umrp-datepicker></umrp-datepicker>
                    </umrp-form-item>
                </umrp-col>
            </umrp-row>
        </umrp-search-card>
        <umrp-table :data="list">
            <template #columns>
                <umrp-table-column title="订单编号" data-index="orderSn"></umrp-table-column>
                <umrp-table-column title="资金类型" data-index="type"></umrp-table-column>
                <umrp-table-column title="来源渠道" data-index="source"></umrp-table-column>
                <umrp-table-column title="商品名称" data-index="productName"></umrp-table-column>
                <umrp-table-column title="交易金额" data-index="amount"></umrp-table-column>
                <umrp-table-column title="结算余额" data-index="balance"></umrp-table-column>
                <umrp-table-column title="交易方" slot-name="user"></umrp-table-column>
                <umrp-table-column title="交易时间" data-index="transactionTime"></umrp-table-column>
            </template>
            <template #user>
                <umrp-user-info :avatar="false"></umrp-user-info>
            </template>
        </umrp-table>
    </umrp-container>
</template>